<template>
  <div>
    <h2>华为账号</h2>
    <p>登录账号已使用云空间、应用市场及更多服务</p>
    <div class="diqu">
      <span><b>国家/地区</b></span>
      <span>中国+86></span>
    </div>
    <van-form @failed="onFailed">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="value1"
          name="pattern"
          placeholder="正则校验"
          :rules="[{ pattern, message: '请输入正确内容' }]"
          @input="shoujihao"
        />

        <van-field
          v-model="sms"
          center
          clearable
          placeholder="请输入短信验证码"
          :rules="[{ pattern: /^\d{6}$/, message: '请输入正确内容' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              :disabled="onyanzhengma"
              @click="ondianji"
              >{{ item }}</van-button
            >
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px">
        <router-link to="/find">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            :disabled="ondenglu"
          >
            登录/注册
          </van-button>
        </router-link>
      </div>
      <div style="margin: 16px">
        <van-button round block native-type="submit"> 密码 </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import axios from "../Axios/index";
const value1 = ref("");
const pattern = /^1[3-9]\d{9}$/;
const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
const onyanzhengma = ref(true);
const ondenglu = ref(true);
const shoujihao = () => {
  if (pattern.test(value1.value)) {
    onyanzhengma.value = false;
  } else {
    onyanzhengma.value = true;
  }
};
//倒计时
const item = ref("获取验证码");
const sms = ref("");
let time = 60;
let djs;
const ondianji = () => {
  djs = setInterval(() => {
    time--;
    item.value = `${time}s倒计时`;
    if (time === 0) {
      item.value = "获取验证码";
      clearInterval(djs);
      time = 60;
    }
  }, 1000);
  axios.get("/getmock").then((resp) => {
    console.log(resp);
    sms.value = resp.data.yzm;
    if (/^\d{6}$/.test(sms.value)) {
      ondenglu.value = false;
    } else {
      ondenglu.value = true;
    }
  });
  axios.get("/getdl").then((resp) => {
    console.log(333, resp);
  });
};
</script>
<style lang="scss" scoped>
h2 {
  text-align: center;
}
p {
  text-align: center;
}
.diqu {
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;
}
</style>